<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 公共头部片段 -->
    <style>
        #floatWindow img{
            width:60px;
            height:60px;
            /*图片大小缩放*/
            object-fit: contain;
            /*图片缩放后不裁剪*/
            border-radius: 10px;
            /*图片圆角*/
            margin-right: 10px;
        }
        .category-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
            justify-content: flex-start;
        }
        .category-link {
            display: block;
            text-align: center;
            text-decoration: none;
            color: #333;
        }
        .category-image {
            width: 120px;
            height: 120px;
            object-fit: contain;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }
        .category-image:hover {
            transform: scale(1.1);
        }

        .category-container img{
            width:120px;
            height:120px;
            object-fit: fill;
            border-radius: 50%;
        }
        #addCategory{
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #0f0;
            transition: background-color 0.3s ease;
        }
        #addCategory:hover{


            background-color: #b7ff00;

        }
        .category-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            padding: 20px;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .category-link {
            display: block;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            background: #f5f5f5;
            transition: transform 0.3s;
        }

        .category-link:hover {
            transform: scale(1.1);
        }



        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn-delete, .btn-update {
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 12px;
            text-decoration: none;
            transition: all 0.3s;
        }

        .btn-delete {
            background-color: #ff4444;
            color: white;
        }

        .btn-delete:hover {
            background-color: #cc0000;
        }

        .btn-update {
            background-color: #4CAF50;
            color: white;
        }

        .btn-update:hover {
            background-color: #45a049;
        }

        #addCategory {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #00C853;
            font-size: 40px;
            color: white;
        }

        .add-icon {
            line-height: 1;
        }



    </style>

</head>

<body>
<header th:replace="common/cms_top"></header>
<!-- 欢迎信息 -->
<div id="Welcome">
    <div id="WelcomeContent" th:if="${session.loginAccount}">
        欢迎，<span th:text="${session.loginAccount.firstname}"></span>！
    </div>
</div>

<!-- 主内容区域 -->
<div id="Main">
    <!-- 背景视频 -->
    <video autoplay loop muted playsinline id="background-video">
        <source th:src="@{/images/main_bg.mp4}" type="video/mp4">
    </video>

    <!-- 主内容容器 -->
    <div id="MainContent">
        <!-- 侧边栏 -->
        <div id="Sidebar">
            <div id="SidebarContent">
                <a th:href="@{/cmsCategoryForm(categoryId='FISH')}">
                    <img th:src="@{/images/fish_icon.gif}"/><br/>
                    Saltwater, Freshwater
                </a>
                <br/>
                <a th:href="@{/cmsCategoryForm(categoryId='DOGS')}">
                    <img th:src="@{/images/dogs_icon.gif}"/><br/>
                    Various Breeds
                </a>
                <br/>
                <a th:href="@{/cmsCategoryForm(categoryId='CATS')}">
                    <img th:src="@{/images/cats_icon.gif}"/><br/>
                    Various Breeds, Exotic Varieties
                </a>
                <br/>
                <a th:href="@{/cmsCategoryForm(categoryId='REPTILES')}">
                    <img th:src="@{/images/reptiles_icon.gif}"/><br/>
                    Lizards, Turtles, Snakes
                </a>
                <br/>
                <a th:href="@{/cmsCategoryForm(categoryId='BIRDS')}">
                    <img th:src="@{/images/birds_icon.gif}"/><br/>
                    Exotic Varieties
                </a>
            </div>
        </div>

        <!-- 主图像 -->
        <div id="MainImage">
            <div id="MainImageContent">

                <div class="category-container">
                    <!-- 分类项 -->
                    <div class="category-item" th:each="category : ${session.categoryList}">
                        <!-- 图片链接 -->
                        <a th:href="@{/cmsCategoryForm(categoryId=${category.catid})}"
                           class="category-link"
                           th:data-catid="${category.catid}"
                           onmouseover="showInfo(event, this.getAttribute('data-catid'))"
                           onmouseout="hideInfo()">
                            <div th:utext="${category.image}"></div>
                        </a>

                        <!-- 操作按钮容器 -->
                        <div class="action-buttons">
                            <a class="btn-delete"
                               th:href="@{/deleteCategory(categoryId=${category.catid})}">删除</a>
                            <a class="btn-update"
                               th:href="@{/categoryUpdateForm(categoryId=${category.catid})}">修改</a>
                        </div>
                    </div>

                    <!-- 添加分类按钮 -->
                    <div class="category-item">
                        <a id="addCategory" class="category-link" th:href="@{/categoryAddForm}">
                            <div class="add-icon">+</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <!-- 分隔线 -->
        <div id="Separator">&nbsp;</div>
    </div>
</div>

<!-- 公共底部片段 -->
<div th:replace="common/bottom"></div>

<!-- 浮动窗口 -->
<div id="floatWindow" style="position: fixed; display: none; background-color: white; border: 1px solid #ccc; padding: 10px; z-index: 1000;">
    Loading...
</div>

<!-- 静态资源 -->
<script th:src="@{/js/floatWindow.js}"></script>
<link rel="stylesheet" th:href="@{/css/floatWindow.css}"/>
</body>
</html>